import React, {PureComponent} from "react"
import "./index.less"
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { Icon as LegacyIcon } from '@ant-design/compatible';
import { Button, Carousel, Tag, Spin } from "antd";
import "animate.css"
import {withRouter} from "react-router"
import {read} from "zr-react-toolbox"
import {HOST} from "../../../../../shared/project-config"
import ImageLoader from 'react-imageloader'
import {titleCreate} from "../../info/compose"


const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1
}

@withRouter
export default class GridItem extends PureComponent {

  constructor(props) {
    super(props);
    this.ref = undefined
  }

  onRefs = (ref) => this.ref = ref

  onNext = (e) => {
    e.stopPropagation()
    if (this.ref) this.ref.next()
  }

  onPrev = (e) => {
    e.stopPropagation()
    if (this.ref) this.ref.prev()
  }

  toBuy = (e) => {
    e.stopPropagation()
    const {history, data} = this.props
    history.push(`/app/library/buy/${read(data, "id") || 1}`)
  }

  preloader = (image)=>() => {
    return (
      <div className={'img-loader-spin'}>
        <img src={`${HOST}/file/thumb/${image}`}/>
      </div>
    )
  }

  render() {
    const {data, onAddFavorite} = this.props
    const {pictures, cadPrice, pltPrice, code, title, collected} = data

    return (
      <div className={'grid-view-item'}>
        {
          <div className={'grid-view-item-content'}>
            {/*图片展示*/}
            <div className={'ld2-carousel-container'} onClick={this.toBuy}>
              <div className={'navigator navigator-left'}>
                <LeftOutlined onClick={this.onPrev} />
              </div>

              <div className={'navigator navigator-right'}>
                <RightOutlined onClick={this.onNext} />
              </div>

              <Carousel ref={this.onRefs} className={'big-image-carousel'} {...settings}>
                {
                  pictures.map(p => (
                    <div className={'big-image-border'}>
                      <div>
                        <ImageLoader src={`${HOST}/file/image/${p.id}`}
                                     preloader={this.preloader(p.id)}
                        />
                      </div>
                    </div>)
                  )}
              </Carousel>
            </div>
            {/*内容信息*/}
            <div className={'ld2-image-mark-text'}>
              <div className={'c-code'}>{code}</div>
              <div className={'c-price'}><span>￥</span>{(pltPrice / 100).toFixed(2)}/{(cadPrice / 100).toFixed(2)}</div>
              <div className={'c-title'}>{title || titleCreate(data) || '暂无描述'}</div>
              <div className={'c-buttons'}>
                {
                  <span>{collected ? <span className={'collected'}>已收藏</span> :
                    <Tag color={'#0073e1'} onClick={onAddFavorite}><LegacyIcon type={'heart'}/> 收藏</Tag>}</span>
                }
              </div>
            </div>
          </div>
        }

      </div>
    );
  }
}